<template>
  <div class="content-div">
    <div class="banner-box">
      <div class="banner-bg"></div>
      <div class="banner-head">
        <div class="location-box" @click="$router.push('/city')">
          <span>{{$store.state.app.city.city_name}}</span>
          <img src="@/assets/images/icon-down.png" alt="" srcset="">
        </div>
        <div class="search-box" @click="$router.push('/search')">
          <van-icon name="search" />
          <span>输入名称筛选医院</span>
        </div>
      </div>
      <div>
        <van-tree-select height="55vw" :items="hospitalList" :main-active-index.sync="active">
          <template #content>
            <div v-if="hospitalList[active] && hospitalList[active].children">
              <van-checkbox-group v-model="hospitalList[active].result">
                <van-cell-group>
                  <van-cell
                    v-for="(item, index) in hospitalList[active].children" v-bind:key="index"
                    clickable
                    :title="item.give_service_name"
                    @click="toggle(index, active)"
                  >
                    <template #right-icon>
                      <van-checkbox :name="index" shape="square" ref="checkboxes" />
                    </template>
                  </van-cell>
                </van-cell-group>
              </van-checkbox-group>
            </div>
          </template>
        </van-tree-select>
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="" @click.stop>
        <div class="block">
          <van-cell-group>
            <van-cell title="是否开启服务">
              <template #right-icon>
                <van-switch v-model="checked" size="24px" />
              </template>
            </van-cell>
            <van-cell title="陪诊医院">
              <template #right-icon>
                <span>{{formItem.hospital_name}}</span>
              </template>
            </van-cell>
            <van-cell title="陪诊项目">
              <template #right-icon>
                <span>{{formItem.give_service_name}}</span>
              </template>
            </van-cell>
            <van-cell title="报价价格" class="flex row-center">
              <template #right-icon>
                <van-field v-model="formItem.initial_quotation" class="input-price flex row-center" />-
                <van-field v-model="formItem.final_offer" class="input-price flex row-center" />
              </template>
            </van-cell>
            <van-field v-model="formItem.determine_price" label="一口价价格" input-align="right" />
            <van-cell>
              <template #title>
                <span style="color:red;">*</span><span>平台建议价：</span>
              </template>
              <template #right-icon>
                <span style="color:red;">¥{{formItem.give_service_price}}</span>
              </template>
            </van-cell>
            <van-cell>
              <van-button type="info" @click="saveService()" block>确  认</van-button>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-overlay>
    <div class="gn-btn-box">
      <div class="gn-btn"  @click="goBack()">返 回</div>
    </div>
  </div>
</template>
<script>
import { findHospitalServiceList, updateAccompanyingPhysicianGive } from '@/api/medicalWaiter.js'
import { Toast } from 'vant'
export default {
  name: 'serviceSettings',
  data () {
    return {
      list: ['a', 'b'],
      result: [0, 1],
      hospitalList: [],
      active: 0,
      show: false,
      formItem: {},
      checked: null
    }
  },
  computed: {
    accompanying_physician_id () {
      return this.$store.state.user.severUserInfo.accompanying_physician_id
    },
    province_code () {
      return this.$store.state.app.city.province_code
    },
    city_code () {
      return this.$store.state.app.city.city_code
    }
  },
  methods: {
    getHospitalServiceList () {
      findHospitalServiceList({
        accompanying_office_id: this.accompanying_physician_id,
        province: this.province_code,
        city: this.city_code
      }).then(res => {
        if (res.data.errcode === 0) {
          this.hospitalList = res.data.data
          this.hospitalList.forEach(element => {
            element['text'] = element.hospital_name
            element['result'] = []
            // console.log(element.children)
            element.children.forEach((element1, index1) => {
              if (element1.is_give === '1') {
                element['result'].push(index1)
              }
            })
          })
          console.log(this.hospitalList)
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    toggle (index, index1) { // index是checkbox下标  active是左侧下标
      console.log('index=' + index, 'active=' + index1, '3333')
      this.show = true
      this.formItem = this.hospitalList[index1].children[index]
      console.log(this.formItem, 'this.formItem')
      this.formItem['hospital_name'] = this.hospitalList[index1].hospital_name
      this.formItem['hospital_id'] = this.hospitalList[index1].hospital_id
      this.formItem['accompanying_office_id'] = this.hospitalList[index1].accompanying_office_id
      this.formItem['id'] = this.hospitalList[index1].children[index].id
      let checked = this.hospitalList[index1].children[index].is_give ? JSON.parse(JSON.stringify(this.hospitalList[index1].children[index].is_give)) : ''
      console.log(checked, '222222')
      this.checked = checked === '1' ? !!true : false
      this.$refs.checkboxes[index].toggle(this.checked)
    },
    closePopup () {
      console.log('###')
      this.show = false
    },
    saveService () {
      console.log('###', this.checked)
      console.log(this.hospitalList)
      let params = {
        accompanying_office_id: this.formItem.accompanying_office_id,
        hospital_id: this.formItem.hospital_id,
        give_service_id: this.formItem.give_service_id,
        is_give: this.checked === true ? '1' : '2',
        initial_quotation: this.formItem.initial_quotation,
        final_offer: this.formItem.final_offer,
        determine_price: this.formItem.determine_price,
        id: this.formItem.id
      }
      updateAccompanyingPhysicianGive(params).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('设置服务成功')
          this.getHospitalServiceList()
          this.show = false
          return
        }
        Toast.success(res.data.errmsg)
      })
    },
    goBack () {
      this.$router.push({
        name: 'mine-waiter'
      })
    }
  },
  mounted () {
    this.getHospitalServiceList()
  }
}
</script>
<style scoped lang="less">
  .content-div {
    .banner-box{
      width: 100%;
      height: 160px;
      position: relative;
      .banner-bg{
        width: 120%;
        height: 100%;
        position: absolute;
        z-index: 0;
        left: -10%;
        background-color: #1989fa;
        border-radius: 0 0 50% 50%;
      }
      .banner-head{
        color: #FFFFFF;
        font-size: 12px;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        .location-box{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding-right: 10px;
          img{
            width: 12px;
            height: 12px;
            margin-left: 2px;
          }
        }
        .search-box{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          background-color: #FFFFFF;
          color: #666666;
          border-radius: 17px;
          height: 34px;
          flex: 1;
          span{
            padding-left: 10px;
          }
        }
      }
      .my-swipe{
        width: 300px;
        margin-left: 10px;
        height: 100px;
        border-radius: 6px;
        .van-swipe-item {
          width: 100%;
          img{
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
      }
    }
    .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px; // 不显示底部tabbar暂时注释掉，需要的时候解开即可
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
    .block {
      width: 100%;
      min-height: 300px;
      margin-top: 150px;
      background-color: #fff;
    }
    .input-price {
      width: 80px;
      height: 32px;
      line-height: 10px;
      background-color: #f8f8f8;
      border-radius: 5px;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .color666 {
      color: #666666
    }
  }
</style>
